<template>
  <div class="layout">
    <el-container v-if="state.showMenu" class="container">
      <el-container class="content">
        <!-- header -->
        <Header :click-menu="cFnHeaderMenu" :active-index="state.activeIndex"/>

        <!-- body -->
        <section class="body">
          <!-- menu item -->
          <Aside :active="state.asideIndex" :item-menu="state.itemMenu"/>

          <!-- main list-->
          <main class="main">
            <router-view/>
          </main>
        </section>

        <!-- footer -->
        <!--<Footer/>-->
      </el-container>
    </el-container>
    <el-container v-else class="container">
      <router-view/>
    </el-container>
  </div>
</template>

<script setup>
import { onUnmounted, reactive } from 'vue';
import Header from './components/Header.vue';
import Aside from './components/Aside.vue';
import { useRoute, useRouter } from 'vue-router';
import { local } from "./utils/storage";

const noMenu = ['/login'];

const route = useRoute()
const router = useRouter();
const state = reactive({
  showMenu: true,
  currentPath: '/dashboard',
  count: {
    number: 1,
  },
  activeIndex: 10,
  itemMenu: null,
  asideIndex: '',
});

// 监听浏览器原生回退事件
if (window.history && window.history.pushState) {
  history.pushState(null, null, document.URL);
  window.addEventListener(
    'popstate',
    () => {
      if (!local.get('ADMIN.TOKEN')) {
        state.showMenu = false;
      }
    },
    false
  );
}

const unwatch = router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    // 如果路径是 /login 则正常执行
    next()
  } else {
    // 如果不是 /login，判断是否有 token
    if (!local.get('ADMIN.TOKEN')) {
      // 如果没有，则跳至登录页面
      next({ path: '/login' })
    } else {
      // 否则继续执行
      next()
    }
  }
  state.showMenu = !noMenu.includes(to.path)
  state.currentPath = to.path
  state.activeIndex = to.meta.id || 10
  state.itemMenu = menuList[to.meta.id.toString()]
  document.title = to.meta.title || ''

  const items = Object.values(state.itemMenu)
  if (items.length) state.asideIndex = items[0].path
})

onUnmounted(() => {
  unwatch()
})

// 切换模块
const menuList = reactive({
  '10': [
    { title: '欢迎页', icon: 'Promotion', path: '/dashboard' },
    { title: '公告通知', icon: 'Comment', path: '/message' },
    { title: '轮播管理', icon: 'PictureFilled', path: '/banner' },
  ],
  '20': [
    { title: '会员管理', icon: 'Avatar', path: '/user' },
    { title: '会员等级', icon: 'Management', path: '/user/rule' },
    { title: '抽奖审核', icon: 'Medal', path: '/user/lucky' },
    { title: '骑手管理', icon: 'Bicycle', path: '/rider' },
  ],
  '30': [
    { title: '商品分类', icon: 'Menu', path: '/goods/category' },
    { title: '商品管理', icon: 'GoodsFilled', path: '/goods' },
  ],
  '40': [
    { title: '订单管理', icon: 'Checked', path: '/order' },
    { title: '充值记录', icon: 'Checked', path: '/order/recharge' },
    { title: '提现记录', icon: 'Checked', path: '/order/withdraw' },
  ],
  // '50': [
  //   { title: '卡券管理', icon: 'Ticket', path: '/coupon' },
  // ],
  '55': [
    // { title: '分销设置', icon: 'Money', path: '/promoter' },
    { title: '奖金池记录', icon: 'Money', path: '/bonuspool' },
    { title: '佣金结算', icon: 'Money', path: '/promission' },
  ],
  '60': [
    { title: '店铺管理', icon: 'Shop', path: '/shop' },
  ],
  '70': [
    { title: '创客活动', icon: 'FullScreen', path: '/maker/activity' },
    { title: '创客会员', icon: 'Avatar', path: '/maker/member' },
  ],
  '90': [
    { title: '系统配置', icon: 'Tools', path: '/config/web' },
    { title: '微信配置', icon: 'ChatDotRound', path: '/config/wxa' },
    { title: '门店标签', icon: 'Menu', path: '/wxa/menu' },
    { title: '短信配置', icon: 'Comment', path: '/config/sms' },
    { title: '定位服务', icon: 'mapLocation', path: '/config/location' },
    { title: '福卡配置', icon: 'priceTag', path: '/config/foka' },
    { title: '修改密码', icon: 'Key', path: '/account' },
  ]
});
const cFnHeaderMenu = (key, keyPath, route) => {
  if (!local.get('ADMIN.TOKEN')) {
    return router.push({ path: '/login' })
  }
  state.itemMenu = menuList[key] || []
};

</script>

<style scoped>
.layout {
  min-height: 100vh;
  background-color: #ffffff;
}

.container {
  height: 100vh;
}

.content {
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  overflow: hidden;
}

.body {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow: hidden;
}

.main {
  flex: 1;
  /*height: calc(100vh - 65px);*/
  overflow: hidden;
}
</style>

<!--+--------------------------------------------->
<!-- common style 								-->
<!--+--------------------------------------------->
<style>
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a {
  color: #409eff;
  text-decoration: none;
}

.el-pagination {
  text-align: center;
  margin-top: 20px;
}

.el-popper__arrow {
  display: none;
}

.aside .el-aside .el-menu-item {
  height: 64px;
  line-height: 64px;
}

.main .el-card .el-card__header {
  height: 64px !important;
  line-height: 32px !important;
  padding: 16px 20px;
  box-sizing: border-box;
}

.main > .el-tabs--border-card > .el-tabs__header.is-top {
  height: 64px !important;
}

.main > .el-tabs--border-card > .el-tabs__header .el-tabs__item {
  height: 64px !important;
  line-height: 64px;
}

.main > .el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child {
  border-right: 1px solid var(--el-border-color);
}

.main > .el-tabs--border-card > .el-tabs__header .el-tabs__item.el-tabs__item.el-active {
  border-bottom: 1px solid var(--el-color-primary);
}

.main .el-card__header .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/*+------------------------------------*/
/*| table common style 		 		   */
/*+------------------------------------*/
.el-form {
  margin-right: 80px;
}

.el-switch__core {
  width: 46px !important;
}

/*+------------------------------------*/
/*| table common style 		 		   */
/*+------------------------------------*/
.el-table__body .el-table__header-wrapper {
  box-shadow: 0 3px 5px 0 #ccc;
}

/* 表格内数据滚动样式 */
.el-card .el-table.table-row-optimize .el-table__body-wrapper > .el-scrollbar {
  overflow-y: auto;
  height: calc(100vh - 270px);
}

.el-card .el-table:not(.table-row-optimize) .el-table__body-wrapper > .el-scrollbar {
  overflow-y: auto;
  height: calc(100vh - 200px);
}

.el-table__expanded-cell[class*=cell] {
  padding: 10px 50px !important;
  background-color: rgba(0, 0, 0, 8%);
}

.el-table__expanded-cell[class*=cell] .el-scrollbar {
  height: auto !important;
}

</style>
